{extend name="public/layout" /}
{block name="head"}
<script type="text/javascript" src="/static/system/plugins/echo/echo.min.js"></script>
<style>
  .file-container {
    display: flex;
    width: 980px;
    padding: 20px 0 10px
  }

  .file-group {
    width: 190px;
    box-sizing: border-box;
    border-right: 1px solid #e4e8eb;
    display: flex;
    flex-direction: column;
  }

  .file-menu {
    list-style: none;
    height: 400px;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1
  }

  .file-item {
    overflow: auto;
  }

  .menu-item-link {
    padding-left: 20px;
    line-height: 40px;
    display: block
  }

  .menu-item-link.active {
    background: #f7f7f7
  }

  .group-add {
    display: block;
    line-height: 60px;
    padding-left: 28px
  }

  .file-item {
    flex: 1;
    width: auto;
    overflow: hidden;
    box-sizing: border-box
  }

  .item-head {
    display: flex;
    justify-content: space-between
  }

  .item-main {
    height: 474px;
    margin-top: 30px;
    overflow: auto;
    position: relative
  }

  .file-list {
    margin: 0 auto;
    width: 725px;
    overflow: auto;
    list-style: none;
    padding-left: 0
  }

  .img-item {
    cursor: pointer;
    float: left;
    width: 110px;
    margin: 0 13px 20px 0;
    position: relative
  }

  .img-item:nth-child(6n) {
    margin-right: 0
  }

  .img-box {
    position: relative;
    display: block;
    width: 110px;
    height: 110px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    border-radius: 2px;
    overflow: hidden
  }

  .img-title {
    margin-top: 8px;
    display: block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px
  }

  .img-checkbox {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    border-radius: 1px;
    background: #ccc
  }

  .img-checkbox.selected {
    background: #44B549;
  }

  .img-item:hover .img-box {
    box-shadow: 0 0 0 2px #8cd68c inset
  }

  .img-item.selected .img-box {
    box-shadow: 0 0 0 2px #8cd68c inset
  }

  .img-item.selected .img-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #44B549;
    opacity: 0.1;
  }

  .img-checkbox.selected::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 4px;
    width: 11px;
    height: 6px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(-45deg);
  }
</style>
{/block}
{block name="body"}

<body>
  <div class="file-container bg-white">
    <div class="file-group">
      <ul class="file-menu">
        <li class="menu-item">
          <a href="javascript:;" class="menu-item-link" data-id="">
            <span class="text-dark">全部附件</span>
          </a>
        </li>
        {volist name="group_list" id="vo"}
        <li class="menu-item">
          <a href="javascript:;" class="menu-item-link" data-id="{$vo.id}">
            <span class="text-dark">
              {$vo.group_name}
              {gt name='vo.file_num' value='0'}({$vo.file_num}){/gt}
            </span>
          </a>
        </li>
        {/volist}
      </ul>
    </div>
    <div class="file-item">
      <div class="item-head">
        <div class="col-sm-6" style="padding-left: 32px">
          <form id="search-form">
            <input type="hidden" name="file_type@in" value="{$Request.param.file_type}" />
            <input type="hidden" id="group_id" name="group_id@=" value="" />
            <input type="hidden" name="sortName" value="id" />
            <input type="hidden" name="sortOrder" value="desc" />
            <div class="input-group">
              <input type="text" class="form-control" name="original_name@like" placeholder="请输入文件名检索..." />
              <span class="input-group-btn">
                <button class="btn btn-default" onclick="doAction.initPage();" type="button">
                  <i class="mdi mdi-magnify"></i> 搜索
                </button>
              </span>
            </div>
          </form>
        </div>
        <div class="text-right" style="padding: 0 32px">
          <div class="f-upload" data-type="{$Request.param.file_type|default='file'}"
            data-callfn="doAction.uploadAfter">
            <input style="visibility:hidden;height:0;width:0;" type="file" multiple />
            <button type="button" class="btn btn-default upload-btn">
              <i class="mdi mdi-upload"></i> 上传文件
            </button>
          </div>
        </div>
      </div>
      <div id="file-box" class="item-main">

      </div>
      <div style="height: 60px">
        <div id="page" class="item-footer pull-right" style="padding: 10px 32px 20px"></div>
      </div>
    </div>
  </div>
  <script type="text/html" id="file-box-tpl">
  {@if list == ''}
  <div style="position: absolute;top: 50%;left: 50%;margin-top: -20px;margin-left: -20px;height: auto">暂无数据</div>
  {@else}
  <ul class="file-list">
    {@each list as value}
    <li class="img-item" onclick="doAction.checkFile(this)" data-list='$${value|json2str}'>
      {@if value.file_type == 'image'}
      <span class="img-box"
            data-echo-background="${value.file_url}"
            style="background-image:url(/static/system/plugins/echo/blank.gif);">
                <i class="img-checkbox"></i>
            </span>
      {@else}
      <span class="img-box" style="background-image:url('/static/system/images/ext/${value.file_type}.png');">
                <i class="img-checkbox"></i>
            </span>
      {@/if}
      <span class="img-title text-center">${value.original_name}</span>
    </li>
    {@/each}
  </ul>
  {@/if}
</script>
  <script>
    $('.file-menu a').click(function () {
      var id = $(this).data('id');
      $('#group_id').val(id);
      $('.file-menu a').removeClass('active');
      $(this).addClass('active');
      $('.f-upload').attr('data-group', $(this).data('id'));
      doAction.initPage();
    });
    var doAction = {
      initPage: function () {
        var searchParams = helper.getSearchParams();
        helper.pagination({
          params: searchParams,
          pageSize: 18,
          dataSource: '/system/attachment/select.html',
          callback: function (list, pagination) {
            var html = juicer($('#file-box-tpl').html(), { list: list });
            $('#file-box').html(html);
            echo.init({ offset: 50, throttle: 0 });
          }
        });
      },
      uploadAfter: function (res, obj) {
        doAction.initPage();
      },
      checkFile: function (obj) {
        var type = '{$Request.param.type}';
        if (type == 'single') {
          $(obj).closest('.file-list').find('.selected').removeClass('selected');
        }
        $(obj).toggleClass('selected');
        $(obj).find('.file-img').toggleClass('selected');
        $(obj).find('.img-checkbox').toggleClass('selected');
      },
      subFile: function () {
        var arr = [];
        $('.file-list>li.selected').each(function (index) {
          arr.push($(this).data('list'));
        });
        return arr;
      }
    };
    formHelper.init();
    doAction.initPage();
  </script>
</body>
{/block}